<template>
  <div
      id="timePie"
      style="height: 400px; width: 100%"
  ></div>
</template>

<script lang="ts" setup>
import { changeTimeUnit } from "@/utils";
import * as echarts from "echarts";
import { PieSeriesOption } from "echarts/charts";
import { TooltipComponentOption, LegendComponentOption } from "echarts/components";
import { onMounted, watch } from "vue";

type EChartsOption = echarts.ComposeOption<TooltipComponentOption | LegendComponentOption | PieSeriesOption>;
const props = defineProps(["data", "type"]);
const getOption = () => {
  // console.log(props.data,"+++++++++++++++")
  const data = props.data;
  let number = 0;
  for (const dataKey of data) {
    number += dataKey.value;
  }
  let p: EChartsOption|null = null;
  if (props.type === 1)
    p = {
      tooltip: {
        trigger: "item",
        valueFormatter: value => {
          if (typeof value == "number") {
            // console.log(changeTimeUnit(value))
            return changeTimeUnit(value);
          } else return value.toString();
        },
      },
      legend: {
        top: "1%",
        left: "center",
        // doesn't perfectly work with our tricks, disable it
        selectedMode: false,
      },
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: ["40%", "70%"],
          center: ["50%", "70%"],
          // adjust the start angle
          startAngle: 180,
          label: {
            show: true,
            formatter(param:any) {
              // correct the percentage
              return param.name + " (" +changeTimeUnit(param.value)+","+ param.percent! * 2 + "%)";
            },
          },
          data: [
            ...data,
            {
              // make an record to fill the bottom 50%
              value: number,
              itemStyle: {
                // stop the chart from rendering this piece
                color: "none",
                decal: {
                  symbol: "none",
                },
              },
              label: {
                show: false,
              },
            },
          ],
        },
      ],
    };
  if (props.type === 2)
    p = {
      tooltip: {
        trigger: "item",
        valueFormatter: value => {
          if (typeof value == "number") {
            // console.log(changeTimeUnit(value))
            return changeTimeUnit(value);
          } else return value.toString();
        },
      },
      legend: {
        top: "1%",
        left: "center",
        // doesn't perfectly work with our tricks, disable it
        selectedMode: false,
      },
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: ["40%", "70%"],
          center: ["50%", "60%"],
          // adjust the start angle
          startAngle: 180,
          label: {
            show: true,
            formatter(param:any) {
              // correct the percentage
              return param.name + " (" +changeTimeUnit(param.value)+","+ param.percent! * 2 + "%)";
            },
          },
          data: [...data],
        },
      ],
    };
  return p;
};
let timePie:any = undefined;
let option: EChartsOption|null = getOption();

/**
 *  data: [
 *         { value: 104800, name: 'Search Engine' },
 *         { value: 73500, name: 'Direct' },
 *         { value: 58000, name: 'Email' },
 *         { value: 48400, name: 'Union Ads' },
 *         { value: 30000, name: 'Video Ads' },
 *         {
 *           // make an record to fill the bottom 50%
 *           value: 104800 + 73500 + 58000 + 48400 + 30000,
 *           itemStyle: {
 *             // stop the chart from rendering this piece
 *             color: 'none',
 *             decal: {
 *               symbol: 'none'
 *             }
 *           },
 *           label: {
 *             show: false
 *           }
 *         }
 *       ]
 */
onMounted(() => {
  const el = document.getElementById("timePie");
  if(el){
    timePie = echarts.init(el);
    timePie.setOption(option);
  }
});
watch(props, () => {
  option = getOption();
  // timePie = echarts.init(document.getElementById("timePie"));
  timePie.setOption(option);
});
</script>
